<script setup lang="ts">
import { ref, onMounted } from 'vue'
import baseTable from '../../components/table/baseTable.vue'
import {Column, Pagination} from "../../components/table/baseTableInterface.ts";

const activeKey = ref('1');
interface TableData {
  id: number;
  name: string;
  age: number;
  source?: string
}
const columns: Column[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
];
const columns2: Column[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '来源2',
    dataIndex: 'source',
    key: 'source',
  },
];
const dataSource: TableData[] = [
  { id: 1, name: 'John', age: 25,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  { id: 2, name: 'Jane', age: 16,},
  // Add more data as needed
];
const dataSource2: TableData[] = [
  { id: 1, name: 'John', age: 25, source: '中文社区'},
  { id: 2, name: 'Jane', age: 16, source: '中文社区'},
  { id: 2, name: 'Jane', age: 16, source: '英文社区'},
  { id: 2, name: 'Jane', age: 16, source: '英文社区'},
  { id: 2, name: 'Jane', age: 16, source: '中文社区'},
  { id: 2, name: 'Jane', age: 16, source: '英文社区'},
  { id: 2, name: 'Jane', age: 16, source: '英文社区'},
  { id: 2, name: 'Jane', age: 16, source: '英文社区'},
  { id: 2, name: 'Jane', age: 16, source: '英文社区'},
  { id: 2, name: 'Jane', age: 16, source: '英文社区'},
  { id: 2, name: 'Jane', age: 16, source: '英文社区'},
  { id: 2, name: 'Jane', age: 16, source: '英文社区'},
  { id: 2, name: 'Jane', age: 16, source: '中文社区'},
  { id: 2, name: 'Jane', age: 16, source: '中文社区'},
  { id: 2, name: 'Jane', age: 16, source: '中文社区'},
  { id: 2, name: 'Jane', age: 16, source: '英文社区'},
  { id: 2, name: 'Jane', age: 16, source: '中文社区'},
  { id: 2, name: 'Jane', age: 16, source: '中文社区'},
  { id: 2, name: 'Jane', age: 16, source: '中文社区'},
  { id: 2, name: 'Jane', age: 16, source: '中文社区'},
  // Add more data as needed
];
const dataSource3: TableData[] = [
  { id: 1, name: 'John', age: 25, source: '微软公司'},
  { id: 2, name: 'Jane', age: 16, source: '微软公司'},
  { id: 2, name: 'Jane', age: 16, source: '微软公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '微软公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '微软公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '微软公司'},
  { id: 2, name: 'Jane', age: 16, source: '微软公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '苹果公司'},
  { id: 2, name: 'Jane', age: 16, source: '微软公司'},
  { id: 2, name: 'Jane', age: 16, source: '微软公司'},
  // Add more data as needed
];
const loading = ref(true);
const pagination: Pagination = {
  current: 1,
  pageSize: 10,
};

const handleTableChange = (pagination: Pagination, filters: any, sorter: any) => {
  console.log('pagination', pagination,filters,sorter)
  // Handle table change event
};

onMounted(()=>{
  setTimeout(()=>{
    loading.value = false
  },1000)
})

</script>

<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="学生用户">
      <base-table
          :columns="columns"
          :data-source="dataSource"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
      >
        <template v-slot:bodyCell="{ scope, record, text }">
          <span v-if="scope.column.key === 'age'"  >
            <span v-if="record.age < 18" style="color: red">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </span >
        </template>
      </base-table>
    </a-tab-pane>
    <a-tab-pane key="2" tab="社区用户" force-render>
      <base-table
          :columns="columns2"
          :data-source="dataSource2"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
      >
        <template v-slot:bodyCell="{ scope, record, text }">
          <span v-if="scope.column.key === 'age'"  >
            <span v-if="record.age < 18" style="color: red">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </span >
        </template>
      </base-table>
    </a-tab-pane>
    <a-tab-pane key="3" tab="公司用户">
      <base-table
          :columns="columns2"
          :data-source="dataSource3"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
      >
        <template v-slot:bodyCell="{ scope, record, text }">
          <span v-if="scope.column.key === 'age'"  >
            <span v-if="record.age < 18" style="color: red">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </span >
        </template>
      </base-table>
    </a-tab-pane>
  </a-tabs>
</template>

<style scoped>

</style>